<template>
  <div class="app-container">
    <div class="page_header gongyuan_header">方案详情</div>
    <div class="detail_page">
      <div class="row">
        <div class="detail_label gongyuan_content">方案名称:</div>
        <div class="detail_value gongyuan_content_value">{{formData.schemeName}}</div>
      </div>
      <div class="row">
        <div class="detail_label gongyuan_content">内部名称:</div>
        <div class="detail_value gongyuan_content_value">{{formData.schemeInName}}</div>
      </div>
      <div class="row">
        <div class="detail_label gongyuan_content">施工类型:</div>
        <div class="detail_value gongyuan_content_value">{{schemeFun}}</div>
      </div>
      <div class="row">
        <div class="detail_label gongyuan_content">方案类型:</div>
        <div class="detail_value gongyuan_content_value">{{schemeType}}</div>
      </div>
      <div class="row">
        <div class="detail_label gongyuan_content">产品:</div>
        <div class="detail_value gongyuan_content_value">
          <div v-for="(pro,index) of formData.schemeProducts" :key="pro.schemeProductId">
            <span>名称: {{pro.schemeProductName}}</span>
            <span>单价: {{pro.schemeProductPrice}}</span>
            <span>数量: {{pro.schemeProductCount}}</span>
            <span>总价: {{pro.schemeProductZprice}}</span>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="detail_label gongyuan_content">人工价:</div>
        <div class="detail_value gongyuan_content_value">{{formData.schemePersonPrice}} 元</div>
      </div>
      <div class="row">
        <div class="detail_label gongyuan_content">预设面积:</div>
        <div class="detail_value gongyuan_content_value">{{formData.schemeArea}} m²</div>
      </div>
      <div class="row">
        <div class="detail_label gongyuan_content">质保期:</div>
        <div class="detail_value gongyuan_content_value">{{formData.schemeGp}} 年</div>
      </div>
      <div class="row">
        <div class="detail_label gongyuan_content">总部成本价:</div>
        <div class="detail_value gongyuan_content_value">{{formData.schemeZbcost}} 元/m²</div>
      </div>
      <div class="row">
        <div class="detail_label gongyuan_content">经销商成本价:</div>
        <div class="detail_value gongyuan_content_value">{{formData.schemeDealerCost}} 元/m²</div>
      </div>
      <div class="row">
        <div class="detail_label gongyuan_content">家装成本价:</div>
        <div class="detail_value gongyuan_content_value">{{formData.schemeJzcost}} 元/m²</div>
      </div>
      <div class="row">
        <div class="detail_label gongyuan_content">方案售价:</div>
        <div class="detail_value gongyuan_content_value">{{formData.schemePrice}} 元/m²</div>
      </div>
      <div class="row">
        <div class="detail_label gongyuan_content">商品介绍:</div>
        <div class="editor_detail" v-html="formData.schemeContent"></div>
      </div>
      <div class="row">
        <div class="detail_label gongyuan_content">经销商:</div>
        <div class="detail_value gongyuan_content_value">
          <div v-for="(area,index) of formData.areas" :key="area.dealerId">
            <span>地区: {{area.schemeAreaProvince}}/{{area.schemeAreaCity}}/{{area.schemeAreaArea}}</span>
            <span>经销商: {{area.dealerName || '-'}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getDealerList } from '@/api/dealer/index'
import { createCURD } from '@/api/sys'
const schemeApi = createCURD('scheme')
import { getSchemeProduct } from '@/api/scheme/index'
export default {
  name: 'Schemedetail',
  components: {},
  data() {
    return {
      formData: {
        schemeName: undefined,
        schemeInName: undefined,
        schemeFun: undefined,
        schemeType: undefined,
        schemePersonPrice: undefined,
        schemeArea: undefined,
        schemeGp: undefined,
        schemeZbcost: undefined,
        schemeDealerCost: undefined,
        schemeJzcost: undefined,
        schemePrice: undefined,
        schemeContent: undefined,
        products: [],
        areas: []
      },
      schemeFunOptions: [],
      schemeTypeOptions: []
    }
  },
  computed: {
    ID() {
      return this.$route.query.id
    },
    schemeFun() {
      return this.findSelectText(this.formData.schemeFun, this.schemeFunOptions)
    },
    schemeType() {
      return this.findSelectText(this.formData.schemeType, this.schemeTypeOptions)
    }
  },
  async created() {
    this.initDictsOptions('product_fun', 'schemeFunOptions')
    this.initDictsOptions('project_type', 'schemeTypeOptions')
  },
  async mounted() {
    try {
      const res = await schemeApi.detail(this.ID)
      this.formData = Object.assign(this.formData, res.data)
      this.formData.areas = []
      this.formData.schemeAreas.forEach(async (area, index) => {
        const { dealerName } = await this.reqDealerList(area)
        this.$set(this.formData.schemeAreas[index], 'dealerName', dealerName)
        this.formData.areas.push({
          schemeAreaProvince: area.schemeAreaProvince,
          schemeAreaCity: area.schemeAreaCity,
          schemeAreaArea: area.schemeAreaArea,
          dealerName: area.dealerName
        })
      })
    } catch (error) {
      console.log(error)
    }
  },
  methods: {
    async initDictsOptions(dicts, listProps) {
      try {
        const res = await this.getDicts(dicts)
        if (res.code === 200) {
          this[listProps] = res.data.map((per) => ({
            label: per.dictLabel,
            value: per.dictValue
          }))
        }
      } catch (error) {
        console.log(error)
      }
    },
    findSelectText(value, options) {
      const obj = options.find((item) => {
        return item.value === value
      }) || { lable: '' }
      return obj.label
    },
    async reqDealerList(area) {
      const res = await getDealerList({
        pageNum: 1,
        pageSize: 10000,
        dealerAddressArea: `${area.schemeAreaProvince}${area.schemeAreaCity}${area.schemeAreaArea}`
      })
      const dealer = res.rows.find((per) => {
        return per.dealerId === area.dealerId
      }) || { dealerName: '' }
      return dealer
    }
  }
}
</script>

<style lang='scss' scoped>
.detail_page {
  .detail_label {
    width: 150px;
  }
  .detail_value {
    & > div:not(:first-child) {
      margin-top: 10px;
    }
    span {
      margin-right: 10px;
    }
  }
}
</style>




